<template>
  <div id="app">
    <TopBar></TopBar>
    <Header></Header>
    <router-view />
    <Footer></Footer>
  </div>
</template>

<script>
import TopBar from '@/components/TopBar';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
// import axios from 'axios';
// import axios from '@/request/request';
import { JingpinAPI } from '@/request/api';
export default {
  components: {
    TopBar,
    Footer,
    Header,
  },
  created() {
    /*
    弊端:

    1.每次发起请求时,都需要输入很长一串地址.一旦地址改动了,每一个地方都需要手动的进行修改
    2.每次发起请求都需要携带token.(重复了)
    3.会有回调地狱的问题
    例如: 请求A完成才能去请求B的结果

    对axios进行封装 后面其它项目可以直接拿来用
    步骤:
      1. src->request.js->request.js(创建axios实例)
    */
    // axios
    //   .get('/products/recommend ')
    //   .then((res) => {
    //     console.log('请求成功', res);
    //   })
    //   .catch((err) => {
    //     console.log('err:', err);
    //   });
    JingpinAPI().then((res) => {
      console.log(res);
    });
  },
};
</script>

<style lang="less">
// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;
// }
</style>
